<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4422991" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe679;</span>
                <div class="name">player-play-circle-fill</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67a;</span>
                <div class="name">player-play-circle</div>
                <div class="code-name">&amp;#xe67a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8a9;</span>
                <div class="name">草稿箱</div>
                <div class="code-name">&amp;#xe8a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8a5;</span>
                <div class="name">文件-文件流转</div>
                <div class="code-name">&amp;#xe8a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe94c;</span>
                <div class="name">驳回</div>
                <div class="code-name">&amp;#xe94c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe896;</span>
                <div class="name">Vue3jpaas-icon_baocun</div>
                <div class="code-name">&amp;#xe896;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe899;</span>
                <div class="name">Vue3jpaas-icon_tijiao</div>
                <div class="code-name">&amp;#xe899;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe89a;</span>
                <div class="name">Vue3jpaas-icon_quhuirenwu</div>
                <div class="code-name">&amp;#xe89a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe89b;</span>
                <div class="name">Vue3jpaas-icon_huifuliuyan</div>
                <div class="code-name">&amp;#xe89b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8a0;</span>
                <div class="name">Vue3jpaas-icon_zuofei</div>
                <div class="code-name">&amp;#xe8a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8a4;</span>
                <div class="name">Vue3jpaas-icon_liucheng</div>
                <div class="code-name">&amp;#xe8a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8a6;</span>
                <div class="name">quxiaoliuzhuan</div>
                <div class="code-name">&amp;#xe8a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b66;</span>
                <div class="name">Vue3_file-filled</div>
                <div class="code-name">&amp;#xe8b66;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xebc6;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xebc6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb1b7;</span>
                <div class="name">首页-线</div>
                <div class="code-name">&amp;#xeb1b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69d;</span>
                <div class="name">扫码</div>
                <div class="code-name">&amp;#xe69d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ab;</span>
                <div class="name">挂起</div>
                <div class="code-name">&amp;#xe8ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe797;</span>
                <div class="name">转办</div>
                <div class="code-name">&amp;#xe797;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6af;</span>
                <div class="name">file-add</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea95;</span>
                <div class="name">加签</div>
                <div class="code-name">&amp;#xea95;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ea;</span>
                <div class="name">Vue3_publish</div>
                <div class="code-name">&amp;#xe8ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe897;</span>
                <div class="name">Vue3jpaas-icon_huifu</div>
                <div class="code-name">&amp;#xe897;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe898;</span>
                <div class="name">Vue3jpaas-icon_genzong</div>
                <div class="code-name">&amp;#xe898;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe89c;</span>
                <div class="name">Vue3jpaas-icon_huifuzhuanfa</div>
                <div class="code-name">&amp;#xe89c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe89d;</span>
                <div class="name">Vue3jpaas-icon_shenpilishi</div>
                <div class="code-name">&amp;#xe89d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">验证码</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe759;</span>
                <div class="name">setup_fill</div>
                <div class="code-name">&amp;#xe759;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b5;</span>
                <div class="name">上传</div>
                <div class="code-name">&amp;#xe8b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b7;</span>
                <div class="name">迁移</div>
                <div class="code-name">&amp;#xe8b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8bb;</span>
                <div class="name">Vue3_folder</div>
                <div class="code-name">&amp;#xe8bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8bc;</span>
                <div class="name">Vue3_Folder-open</div>
                <div class="code-name">&amp;#xe8bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8eb;</span>
                <div class="name">Vue3_file</div>
                <div class="code-name">&amp;#xe8eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe961;</span>
                <div class="name">Vue3_setting</div>
                <div class="code-name">&amp;#xe961;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ee;</span>
                <div class="name">Vue3_search</div>
                <div class="code-name">&amp;#xe8ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe894;</span>
                <div class="name">edit</div>
                <div class="code-name">&amp;#xe894;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
                <div class="name">close_filled</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
                <div class="name">check</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe653;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">check_filled</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
                <div class="name">forbidden</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">forbidden_filled</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">info_filled</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe658;</span>
                <div class="name">info</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe659;</span>
                <div class="name">help_filled</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65a;</span>
                <div class="name">help</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65b;</span>
                <div class="name">caution</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65c;</span>
                <div class="name">caution_filled</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">上传 (1)</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f1;</span>
                <div class="name">clock_fill</div>
                <div class="code-name">&amp;#xe6f1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f2;</span>
                <div class="name">clock</div>
                <div class="code-name">&amp;#xe6f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72d;</span>
                <div class="name">lock</div>
                <div class="code-name">&amp;#xe72d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72f;</span>
                <div class="name">manage_fill</div>
                <div class="code-name">&amp;#xe72f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe730;</span>
                <div class="name">manage</div>
                <div class="code-name">&amp;#xe730;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe739;</span>
                <div class="name">offline_fill</div>
                <div class="code-name">&amp;#xe739;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73a;</span>
                <div class="name">offline</div>
                <div class="code-name">&amp;#xe73a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe740;</span>
                <div class="name">people</div>
                <div class="code-name">&amp;#xe740;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe741;</span>
                <div class="name">picture_fill</div>
                <div class="code-name">&amp;#xe741;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe742;</span>
                <div class="name">picture</div>
                <div class="code-name">&amp;#xe742;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe744;</span>
                <div class="name">playon_fill</div>
                <div class="code-name">&amp;#xe744;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe745;</span>
                <div class="name">playon</div>
                <div class="code-name">&amp;#xe745;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe767;</span>
                <div class="name">systemprompt_fill</div>
                <div class="code-name">&amp;#xe767;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe768;</span>
                <div class="name">systemprompt</div>
                <div class="code-name">&amp;#xe768;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe772;</span>
                <div class="name">translation_fill</div>
                <div class="code-name">&amp;#xe772;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe773;</span>
                <div class="name">translation</div>
                <div class="code-name">&amp;#xe773;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe779;</span>
                <div class="name">unlock</div>
                <div class="code-name">&amp;#xe779;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe787;</span>
                <div class="name">cloud-download</div>
                <div class="code-name">&amp;#xe787;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe795;</span>
                <div class="name">email</div>
                <div class="code-name">&amp;#xe795;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe796;</span>
                <div class="name">email-fill</div>
                <div class="code-name">&amp;#xe796;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79d;</span>
                <div class="name">find-fill</div>
                <div class="code-name">&amp;#xe79d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79e;</span>
                <div class="name">find</div>
                <div class="code-name">&amp;#xe79e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79f;</span>
                <div class="name">gift</div>
                <div class="code-name">&amp;#xe79f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a0;</span>
                <div class="name">gift-fill</div>
                <div class="code-name">&amp;#xe7a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b0;</span>
                <div class="name">microphone-mute</div>
                <div class="code-name">&amp;#xe7b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b1;</span>
                <div class="name">microphone-mute-fill</div>
                <div class="code-name">&amp;#xe7b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c3;</span>
                <div class="name">sex-man</div>
                <div class="code-name">&amp;#xe7c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c4;</span>
                <div class="name">sex-woman</div>
                <div class="code-name">&amp;#xe7c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ca;</span>
                <div class="name">sound-mute</div>
                <div class="code-name">&amp;#xe7ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7cb;</span>
                <div class="name">sound-mute-fill</div>
                <div class="code-name">&amp;#xe7cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7cd;</span>
                <div class="name">star-collection-fill</div>
                <div class="code-name">&amp;#xe7cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7cf;</span>
                <div class="name">star-collection</div>
                <div class="code-name">&amp;#xe7cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d0;</span>
                <div class="name">star-collection-half</div>
                <div class="code-name">&amp;#xe7d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe673;</span>
                <div class="name">modal-fullscreen</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe674;</span>
                <div class="name">modal-drag</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe675;</span>
                <div class="name">modal-fullscreen-exit</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe691;</span>
                <div class="name">file-folder-fill</div>
                <div class="code-name">&amp;#xe691;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe693;</span>
                <div class="name">file-folder-add-fill</div>
                <div class="code-name">&amp;#xe693;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">添加用户组</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ca;</span>
                <div class="name">文件资料</div>
                <div class="code-name">&amp;#xe6ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">清除</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8e2;</span>
                <div class="name">Vue3_date</div>
                <div class="code-name">&amp;#xe8e2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ed;</span>
                <div class="name">Vue3_share</div>
                <div class="code-name">&amp;#xe8ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ef;</span>
                <div class="name">Vue3_user-add</div>
                <div class="code-name">&amp;#xe8ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8f0;</span>
                <div class="name">Vue3_user group</div>
                <div class="code-name">&amp;#xe8f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8f2;</span>
                <div class="name">Vue3_user</div>
                <div class="code-name">&amp;#xe8f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8f3;</span>
                <div class="name">Vue3_notice</div>
                <div class="code-name">&amp;#xe8f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8f7;</span>
                <div class="name">Vue3_feedback</div>
                <div class="code-name">&amp;#xe8f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9b2;</span>
                <div class="name">删除、清除</div>
                <div class="code-name">&amp;#xe9b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8cc;</span>
                <div class="name">个人信息</div>
                <div class="code-name">&amp;#xe8cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e0;</span>
                <div class="name">Vue3_share-filled</div>
                <div class="code-name">&amp;#xe6e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ff;</span>
                <div class="name">Vue3_feedback-filled</div>
                <div class="code-name">&amp;#xe6ff;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe707;</span>
                <div class="name">Vue3_notice-filled</div>
                <div class="code-name">&amp;#xe707;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe686;</span>
                <div class="name">Vue3_date-filled</div>
                <div class="code-name">&amp;#xe686;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f3;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe6f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe752;</span>
                <div class="name">right</div>
                <div class="code-name">&amp;#xe752;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b9;</span>
                <div class="name">加</div>
                <div class="code-name">&amp;#xe6b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">减</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe670;</span>
                <div class="name">删除-打开</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe737;</span>
                <div class="name">删除_打开_fill</div>
                <div class="code-name">&amp;#xe737;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8e9;</span>
                <div class="name">Vue3_delete</div>
                <div class="code-name">&amp;#xe8e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9ac;</span>
                <div class="name">Vue3_screen</div>
                <div class="code-name">&amp;#xe9ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d8;</span>
                <div class="name">Vue3_screen-filled</div>
                <div class="code-name">&amp;#xe6d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fe;</span>
                <div class="name">Vue3_delete-filled</div>
                <div class="code-name">&amp;#xe6fe;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe709;</span>
                <div class="name">more</div>
                <div class="code-name">&amp;#xe709;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe793;</span>
                <div class="name">more-vertical</div>
                <div class="code-name">&amp;#xe793;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb1b6;</span>
                <div class="name">16gf-userGroup2</div>
                <div class="code-name">&amp;#xeb1b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb03;</span>
                <div class="name">箭头_列表向右</div>
                <div class="code-name">&amp;#xeb03;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb04;</span>
                <div class="name">箭头_列表收起</div>
                <div class="code-name">&amp;#xeb04;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb05;</span>
                <div class="name">箭头_列表向左</div>
                <div class="code-name">&amp;#xeb05;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb08;</span>
                <div class="name">箭头_列表展开</div>
                <div class="code-name">&amp;#xeb08;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72b;</span>
                <div class="name">lock_fill</div>
                <div class="code-name">&amp;#xe72b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73e;</span>
                <div class="name">people_fill</div>
                <div class="code-name">&amp;#xe73e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe777;</span>
                <div class="name">unlock_fill</div>
                <div class="code-name">&amp;#xe777;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">组织架构</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8cd;</span>
                <div class="name">语言切换</div>
                <div class="code-name">&amp;#xe8cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c8;</span>
                <div class="name">企业公司</div>
                <div class="code-name">&amp;#xe6c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9ee;</span>
                <div class="name">地球,地理,全球</div>
                <div class="code-name">&amp;#xe9ee;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1713592597954') format('woff2'),
       url('iconfont.woff?t=1713592597954') format('woff'),
       url('iconfont.ttf?t=1713592597954') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-player-play-circle-fill"></span>
            <div class="name">
              player-play-circle-fill
            </div>
            <div class="code-name">.icon-player-play-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-player-play-circle"></span>
            <div class="name">
              player-play-circle
            </div>
            <div class="code-name">.icon-player-play-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caogaoxiang"></span>
            <div class="name">
              草稿箱
            </div>
            <div class="code-name">.icon-caogaoxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-liuzhuan"></span>
            <div class="name">
              文件-文件流转
            </div>
            <div class="code-name">.icon-liuzhuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bohui"></span>
            <div class="name">
              驳回
            </div>
            <div class="code-name">.icon-bohui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Vue3jpaas-icon_baocun"></span>
            <div class="name">
              Vue3jpaas-icon_baocun
            </div>
            <div class="code-name">.icon-Vue3jpaas-icon_baocun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Vue3jpaas-icon_tijiao"></span>
            <div class="name">
              Vue3jpaas-icon_tijiao
            </div>
            <div class="code-name">.icon-Vue3jpaas-icon_tijiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Vue3jpaas-icon_quhuirenwu"></span>
            <div class="name">
              Vue3jpaas-icon_quhuirenwu
            </div>
            <div class="code-name">.icon-Vue3jpaas-icon_quhuirenwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Vue3jpaas-icon_huifuliuyan"></span>
            <div class="name">
              Vue3jpaas-icon_huifuliuyan
            </div>
            <div class="code-name">.icon-Vue3jpaas-icon_huifuliuyan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Vue3jpaas-icon_zuofei"></span>
            <div class="name">
              Vue3jpaas-icon_zuofei
            </div>
            <div class="code-name">.icon-Vue3jpaas-icon_zuofei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Vue3jpaas-icon_liucheng"></span>
            <div class="name">
              Vue3jpaas-icon_liucheng
            </div>
            <div class="code-name">.icon-Vue3jpaas-icon_liucheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quxiaoliuzhuan"></span>
            <div class="name">
              quxiaoliuzhuan
            </div>
            <div class="code-name">.icon-quxiaoliuzhuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file-filled"></span>
            <div class="name">
              Vue3_file-filled
            </div>
            <div class="code-name">.icon-file-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoqiankuozhan_shouye-341"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-biaoqiankuozhan_shouye-341
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoqiankuozhan_shouye-341-copy"></span>
            <div class="name">
              首页-线
            </div>
            <div class="code-name">.icon-biaoqiankuozhan_shouye-341-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Group-"></span>
            <div class="name">
              扫码
            </div>
            <div class="code-name">.icon-Group-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guaqi"></span>
            <div class="name">
              挂起
            </div>
            <div class="code-name">.icon-guaqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuanban"></span>
            <div class="name">
              转办
            </div>
            <div class="code-name">.icon-zhuanban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file-add"></span>
            <div class="name">
              file-add
            </div>
            <div class="code-name">.icon-file-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiaqian"></span>
            <div class="name">
              加签
            </div>
            <div class="code-name">.icon-jiaqian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Vue3_publish"></span>
            <div class="name">
              Vue3_publish
            </div>
            <div class="code-name">.icon-Vue3_publish
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Vue3jpaas-icon_huifu"></span>
            <div class="name">
              Vue3jpaas-icon_huifu
            </div>
            <div class="code-name">.icon-Vue3jpaas-icon_huifu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-genzong"></span>
            <div class="name">
              Vue3jpaas-icon_genzong
            </div>
            <div class="code-name">.icon-icon-genzong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Vue3jpaas-icon_huifuzhuanfa"></span>
            <div class="name">
              Vue3jpaas-icon_huifuzhuanfa
            </div>
            <div class="code-name">.icon-Vue3jpaas-icon_huifuzhuanfa
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Vue3jpaas-icon_shenpilishi"></span>
            <div class="name">
              Vue3jpaas-icon_shenpilishi
            </div>
            <div class="code-name">.icon-Vue3jpaas-icon_shenpilishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yanzhengma"></span>
            <div class="name">
              验证码
            </div>
            <div class="code-name">.icon-yanzhengma
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-setup_fill"></span>
            <div class="name">
              setup_fill
            </div>
            <div class="code-name">.icon-setup_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangchuan1"></span>
            <div class="name">
              上传
            </div>
            <div class="code-name">.icon-shangchuan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qianyi"></span>
            <div class="name">
              迁移
            </div>
            <div class="code-name">.icon-qianyi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Vue3_folder"></span>
            <div class="name">
              Vue3_folder
            </div>
            <div class="code-name">.icon-Vue3_folder
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Vue3_Folder-open"></span>
            <div class="name">
              Vue3_Folder-open
            </div>
            <div class="code-name">.icon-Vue3_Folder-open
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Vue3_file"></span>
            <div class="name">
              Vue3_file
            </div>
            <div class="code-name">.icon-Vue3_file
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Vue3_setting"></span>
            <div class="name">
              Vue3_setting
            </div>
            <div class="code-name">.icon-Vue3_setting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Vue3_search"></span>
            <div class="name">
              Vue3_search
            </div>
            <div class="code-name">.icon-Vue3_search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-edit"></span>
            <div class="name">
              edit
            </div>
            <div class="code-name">.icon-edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test26"></span>
            <div class="name">
              close_filled
            </div>
            <div class="code-name">.icon-icon-test26
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test27"></span>
            <div class="name">
              check
            </div>
            <div class="code-name">.icon-icon-test27
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test28"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.icon-icon-test28
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test29"></span>
            <div class="name">
              check_filled
            </div>
            <div class="code-name">.icon-icon-test29
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test30"></span>
            <div class="name">
              forbidden
            </div>
            <div class="code-name">.icon-icon-test30
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test31"></span>
            <div class="name">
              forbidden_filled
            </div>
            <div class="code-name">.icon-icon-test31
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test32"></span>
            <div class="name">
              info_filled
            </div>
            <div class="code-name">.icon-icon-test32
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test33"></span>
            <div class="name">
              info
            </div>
            <div class="code-name">.icon-icon-test33
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test34"></span>
            <div class="name">
              help_filled
            </div>
            <div class="code-name">.icon-icon-test34
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test35"></span>
            <div class="name">
              help
            </div>
            <div class="code-name">.icon-icon-test35
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test36"></span>
            <div class="name">
              caution
            </div>
            <div class="code-name">.icon-icon-test36
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test37"></span>
            <div class="name">
              caution_filled
            </div>
            <div class="code-name">.icon-icon-test37
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangchuan"></span>
            <div class="name">
              上传 (1)
            </div>
            <div class="code-name">.icon-shangchuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-clock_fill"></span>
            <div class="name">
              clock_fill
            </div>
            <div class="code-name">.icon-clock_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-clock"></span>
            <div class="name">
              clock
            </div>
            <div class="code-name">.icon-clock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lock"></span>
            <div class="name">
              lock
            </div>
            <div class="code-name">.icon-lock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-manage_fill"></span>
            <div class="name">
              manage_fill
            </div>
            <div class="code-name">.icon-manage_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-manage"></span>
            <div class="name">
              manage
            </div>
            <div class="code-name">.icon-manage
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-offline_fill"></span>
            <div class="name">
              offline_fill
            </div>
            <div class="code-name">.icon-offline_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-offline"></span>
            <div class="name">
              offline
            </div>
            <div class="code-name">.icon-offline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-people"></span>
            <div class="name">
              people
            </div>
            <div class="code-name">.icon-people
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-picture_fill"></span>
            <div class="name">
              picture_fill
            </div>
            <div class="code-name">.icon-picture_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-picture"></span>
            <div class="name">
              picture
            </div>
            <div class="code-name">.icon-picture
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-playon_fill"></span>
            <div class="name">
              playon_fill
            </div>
            <div class="code-name">.icon-playon_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-playon"></span>
            <div class="name">
              playon
            </div>
            <div class="code-name">.icon-playon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-systemprompt_fill"></span>
            <div class="name">
              systemprompt_fill
            </div>
            <div class="code-name">.icon-systemprompt_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-systemprompt"></span>
            <div class="name">
              systemprompt
            </div>
            <div class="code-name">.icon-systemprompt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-translation_fill"></span>
            <div class="name">
              translation_fill
            </div>
            <div class="code-name">.icon-translation_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-translation"></span>
            <div class="name">
              translation
            </div>
            <div class="code-name">.icon-translation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-unlock"></span>
            <div class="name">
              unlock
            </div>
            <div class="code-name">.icon-unlock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cloud-download"></span>
            <div class="name">
              cloud-download
            </div>
            <div class="code-name">.icon-cloud-download
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-email"></span>
            <div class="name">
              email
            </div>
            <div class="code-name">.icon-email
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-email-fill"></span>
            <div class="name">
              email-fill
            </div>
            <div class="code-name">.icon-email-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-find-fill"></span>
            <div class="name">
              find-fill
            </div>
            <div class="code-name">.icon-find-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-find"></span>
            <div class="name">
              find
            </div>
            <div class="code-name">.icon-find
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gift"></span>
            <div class="name">
              gift
            </div>
            <div class="code-name">.icon-gift
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gift-fill"></span>
            <div class="name">
              gift-fill
            </div>
            <div class="code-name">.icon-gift-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-microphone-mute"></span>
            <div class="name">
              microphone-mute
            </div>
            <div class="code-name">.icon-microphone-mute
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-microphone-mute-fill"></span>
            <div class="name">
              microphone-mute-fill
            </div>
            <div class="code-name">.icon-microphone-mute-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sex-man"></span>
            <div class="name">
              sex-man
            </div>
            <div class="code-name">.icon-sex-man
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sex-woman"></span>
            <div class="name">
              sex-woman
            </div>
            <div class="code-name">.icon-sex-woman
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sound-mute"></span>
            <div class="name">
              sound-mute
            </div>
            <div class="code-name">.icon-sound-mute
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sound-mute-fill"></span>
            <div class="name">
              sound-mute-fill
            </div>
            <div class="code-name">.icon-sound-mute-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-star-collection-fill"></span>
            <div class="name">
              star-collection-fill
            </div>
            <div class="code-name">.icon-star-collection-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-star-collection"></span>
            <div class="name">
              star-collection
            </div>
            <div class="code-name">.icon-star-collection
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-star-collection-half"></span>
            <div class="name">
              star-collection-half
            </div>
            <div class="code-name">.icon-star-collection-half
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-modal-fullscreen"></span>
            <div class="name">
              modal-fullscreen
            </div>
            <div class="code-name">.icon-modal-fullscreen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-modal-drag"></span>
            <div class="name">
              modal-drag
            </div>
            <div class="code-name">.icon-modal-drag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-modal-fullscreen-exit"></span>
            <div class="name">
              modal-fullscreen-exit
            </div>
            <div class="code-name">.icon-modal-fullscreen-exit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file-folder-fill"></span>
            <div class="name">
              file-folder-fill
            </div>
            <div class="code-name">.icon-file-folder-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file-folder-add-fill"></span>
            <div class="name">
              file-folder-add-fill
            </div>
            <div class="code-name">.icon-file-folder-add-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-add-team"></span>
            <div class="name">
              添加用户组
            </div>
            <div class="code-name">.icon-add-team
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenjianziliao"></span>
            <div class="name">
              文件资料
            </div>
            <div class="code-name">.icon-wenjianziliao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qingchu"></span>
            <div class="name">
              清除
            </div>
            <div class="code-name">.icon-qingchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Vue3_date"></span>
            <div class="name">
              Vue3_date
            </div>
            <div class="code-name">.icon-Vue3_date
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Vue3_share"></span>
            <div class="name">
              Vue3_share
            </div>
            <div class="code-name">.icon-Vue3_share
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Vue3_user-add"></span>
            <div class="name">
              Vue3_user-add
            </div>
            <div class="code-name">.icon-Vue3_user-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-Vue3_usergroup"></span>
            <div class="name">
              Vue3_user group
            </div>
            <div class="code-name">.icon-a-Vue3_usergroup
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Vue3_user"></span>
            <div class="name">
              Vue3_user
            </div>
            <div class="code-name">.icon-Vue3_user
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Vue3_notice"></span>
            <div class="name">
              Vue3_notice
            </div>
            <div class="code-name">.icon-Vue3_notice
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Vue3_feedback"></span>
            <div class="name">
              Vue3_feedback
            </div>
            <div class="code-name">.icon-Vue3_feedback
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-shanchuqingchu"></span>
            <div class="name">
              删除、清除
            </div>
            <div class="code-name">.icon-a-shanchuqingchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gerenxinxi"></span>
            <div class="name">
              个人信息
            </div>
            <div class="code-name">.icon-gerenxinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Vue3_share-filled"></span>
            <div class="name">
              Vue3_share-filled
            </div>
            <div class="code-name">.icon-Vue3_share-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Vue3_feedback-filled"></span>
            <div class="name">
              Vue3_feedback-filled
            </div>
            <div class="code-name">.icon-Vue3_feedback-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Vue3_notice-filled"></span>
            <div class="name">
              Vue3_notice-filled
            </div>
            <div class="code-name">.icon-Vue3_notice-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Vue3_date-filled1"></span>
            <div class="name">
              Vue3_date-filled
            </div>
            <div class="code-name">.icon-Vue3_date-filled1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.icon-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-right"></span>
            <div class="name">
              right
            </div>
            <div class="code-name">.icon-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jia"></span>
            <div class="name">
              加
            </div>
            <div class="code-name">.icon-jia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jian"></span>
            <div class="name">
              减
            </div>
            <div class="code-name">.icon-jian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchu-dakai"></span>
            <div class="name">
              删除-打开
            </div>
            <div class="code-name">.icon-shanchu-dakai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchu_dakai_fill"></span>
            <div class="name">
              删除_打开_fill
            </div>
            <div class="code-name">.icon-shanchu_dakai_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Vue3_delete"></span>
            <div class="name">
              Vue3_delete
            </div>
            <div class="code-name">.icon-Vue3_delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Vue3_screen"></span>
            <div class="name">
              Vue3_screen
            </div>
            <div class="code-name">.icon-Vue3_screen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Vue3_screen-filled"></span>
            <div class="name">
              Vue3_screen-filled
            </div>
            <div class="code-name">.icon-Vue3_screen-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Vue3_delete-filled"></span>
            <div class="name">
              Vue3_delete-filled
            </div>
            <div class="code-name">.icon-Vue3_delete-filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-more1"></span>
            <div class="name">
              more
            </div>
            <div class="code-name">.icon-more1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-more-vertical"></span>
            <div class="name">
              more-vertical
            </div>
            <div class="code-name">.icon-more-vertical
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-userGroup2"></span>
            <div class="name">
              16gf-userGroup2
            </div>
            <div class="code-name">.icon-userGroup2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou_liebiaoxiangyou"></span>
            <div class="name">
              箭头_列表向右
            </div>
            <div class="code-name">.icon-jiantou_liebiaoxiangyou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou_liebiaoshouqi"></span>
            <div class="name">
              箭头_列表收起
            </div>
            <div class="code-name">.icon-jiantou_liebiaoshouqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou_liebiaoxiangzuo"></span>
            <div class="name">
              箭头_列表向左
            </div>
            <div class="code-name">.icon-jiantou_liebiaoxiangzuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou_liebiaozhankai"></span>
            <div class="name">
              箭头_列表展开
            </div>
            <div class="code-name">.icon-jiantou_liebiaozhankai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lock_fill1"></span>
            <div class="name">
              lock_fill
            </div>
            <div class="code-name">.icon-lock_fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-people_fill"></span>
            <div class="name">
              people_fill
            </div>
            <div class="code-name">.icon-people_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-unlock_fill"></span>
            <div class="name">
              unlock_fill
            </div>
            <div class="code-name">.icon-unlock_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zuzhijiagou"></span>
            <div class="name">
              组织架构
            </div>
            <div class="code-name">.icon-zuzhijiagou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yuyanqiehuan1"></span>
            <div class="name">
              语言切换
            </div>
            <div class="code-name">.icon-yuyanqiehuan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qiyegongsi"></span>
            <div class="name">
              企业公司
            </div>
            <div class="code-name">.icon-qiyegongsi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-earth-full"></span>
            <div class="name">
              地球,地理,全球
            </div>
            <div class="code-name">.icon-earth-full
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-player-play-circle-fill"></use>
                </svg>
                <div class="name">player-play-circle-fill</div>
                <div class="code-name">#icon-player-play-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-player-play-circle"></use>
                </svg>
                <div class="name">player-play-circle</div>
                <div class="code-name">#icon-player-play-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caogaoxiang"></use>
                </svg>
                <div class="name">草稿箱</div>
                <div class="code-name">#icon-caogaoxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-liuzhuan"></use>
                </svg>
                <div class="name">文件-文件流转</div>
                <div class="code-name">#icon-liuzhuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bohui"></use>
                </svg>
                <div class="name">驳回</div>
                <div class="code-name">#icon-bohui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Vue3jpaas-icon_baocun"></use>
                </svg>
                <div class="name">Vue3jpaas-icon_baocun</div>
                <div class="code-name">#icon-Vue3jpaas-icon_baocun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Vue3jpaas-icon_tijiao"></use>
                </svg>
                <div class="name">Vue3jpaas-icon_tijiao</div>
                <div class="code-name">#icon-Vue3jpaas-icon_tijiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Vue3jpaas-icon_quhuirenwu"></use>
                </svg>
                <div class="name">Vue3jpaas-icon_quhuirenwu</div>
                <div class="code-name">#icon-Vue3jpaas-icon_quhuirenwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Vue3jpaas-icon_huifuliuyan"></use>
                </svg>
                <div class="name">Vue3jpaas-icon_huifuliuyan</div>
                <div class="code-name">#icon-Vue3jpaas-icon_huifuliuyan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Vue3jpaas-icon_zuofei"></use>
                </svg>
                <div class="name">Vue3jpaas-icon_zuofei</div>
                <div class="code-name">#icon-Vue3jpaas-icon_zuofei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Vue3jpaas-icon_liucheng"></use>
                </svg>
                <div class="name">Vue3jpaas-icon_liucheng</div>
                <div class="code-name">#icon-Vue3jpaas-icon_liucheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quxiaoliuzhuan"></use>
                </svg>
                <div class="name">quxiaoliuzhuan</div>
                <div class="code-name">#icon-quxiaoliuzhuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file-filled"></use>
                </svg>
                <div class="name">Vue3_file-filled</div>
                <div class="code-name">#icon-file-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoqiankuozhan_shouye-341"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-biaoqiankuozhan_shouye-341</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoqiankuozhan_shouye-341-copy"></use>
                </svg>
                <div class="name">首页-线</div>
                <div class="code-name">#icon-biaoqiankuozhan_shouye-341-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Group-"></use>
                </svg>
                <div class="name">扫码</div>
                <div class="code-name">#icon-Group-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guaqi"></use>
                </svg>
                <div class="name">挂起</div>
                <div class="code-name">#icon-guaqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuanban"></use>
                </svg>
                <div class="name">转办</div>
                <div class="code-name">#icon-zhuanban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file-add"></use>
                </svg>
                <div class="name">file-add</div>
                <div class="code-name">#icon-file-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiaqian"></use>
                </svg>
                <div class="name">加签</div>
                <div class="code-name">#icon-jiaqian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Vue3_publish"></use>
                </svg>
                <div class="name">Vue3_publish</div>
                <div class="code-name">#icon-Vue3_publish</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Vue3jpaas-icon_huifu"></use>
                </svg>
                <div class="name">Vue3jpaas-icon_huifu</div>
                <div class="code-name">#icon-Vue3jpaas-icon_huifu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-genzong"></use>
                </svg>
                <div class="name">Vue3jpaas-icon_genzong</div>
                <div class="code-name">#icon-icon-genzong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Vue3jpaas-icon_huifuzhuanfa"></use>
                </svg>
                <div class="name">Vue3jpaas-icon_huifuzhuanfa</div>
                <div class="code-name">#icon-Vue3jpaas-icon_huifuzhuanfa</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Vue3jpaas-icon_shenpilishi"></use>
                </svg>
                <div class="name">Vue3jpaas-icon_shenpilishi</div>
                <div class="code-name">#icon-Vue3jpaas-icon_shenpilishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yanzhengma"></use>
                </svg>
                <div class="name">验证码</div>
                <div class="code-name">#icon-yanzhengma</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-setup_fill"></use>
                </svg>
                <div class="name">setup_fill</div>
                <div class="code-name">#icon-setup_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangchuan1"></use>
                </svg>
                <div class="name">上传</div>
                <div class="code-name">#icon-shangchuan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qianyi"></use>
                </svg>
                <div class="name">迁移</div>
                <div class="code-name">#icon-qianyi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Vue3_folder"></use>
                </svg>
                <div class="name">Vue3_folder</div>
                <div class="code-name">#icon-Vue3_folder</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Vue3_Folder-open"></use>
                </svg>
                <div class="name">Vue3_Folder-open</div>
                <div class="code-name">#icon-Vue3_Folder-open</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Vue3_file"></use>
                </svg>
                <div class="name">Vue3_file</div>
                <div class="code-name">#icon-Vue3_file</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Vue3_setting"></use>
                </svg>
                <div class="name">Vue3_setting</div>
                <div class="code-name">#icon-Vue3_setting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Vue3_search"></use>
                </svg>
                <div class="name">Vue3_search</div>
                <div class="code-name">#icon-Vue3_search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit"></use>
                </svg>
                <div class="name">edit</div>
                <div class="code-name">#icon-edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test26"></use>
                </svg>
                <div class="name">close_filled</div>
                <div class="code-name">#icon-icon-test26</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test27"></use>
                </svg>
                <div class="name">check</div>
                <div class="code-name">#icon-icon-test27</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test28"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#icon-icon-test28</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test29"></use>
                </svg>
                <div class="name">check_filled</div>
                <div class="code-name">#icon-icon-test29</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test30"></use>
                </svg>
                <div class="name">forbidden</div>
                <div class="code-name">#icon-icon-test30</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test31"></use>
                </svg>
                <div class="name">forbidden_filled</div>
                <div class="code-name">#icon-icon-test31</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test32"></use>
                </svg>
                <div class="name">info_filled</div>
                <div class="code-name">#icon-icon-test32</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test33"></use>
                </svg>
                <div class="name">info</div>
                <div class="code-name">#icon-icon-test33</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test34"></use>
                </svg>
                <div class="name">help_filled</div>
                <div class="code-name">#icon-icon-test34</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test35"></use>
                </svg>
                <div class="name">help</div>
                <div class="code-name">#icon-icon-test35</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test36"></use>
                </svg>
                <div class="name">caution</div>
                <div class="code-name">#icon-icon-test36</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test37"></use>
                </svg>
                <div class="name">caution_filled</div>
                <div class="code-name">#icon-icon-test37</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangchuan"></use>
                </svg>
                <div class="name">上传 (1)</div>
                <div class="code-name">#icon-shangchuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clock_fill"></use>
                </svg>
                <div class="name">clock_fill</div>
                <div class="code-name">#icon-clock_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clock"></use>
                </svg>
                <div class="name">clock</div>
                <div class="code-name">#icon-clock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock"></use>
                </svg>
                <div class="name">lock</div>
                <div class="code-name">#icon-lock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-manage_fill"></use>
                </svg>
                <div class="name">manage_fill</div>
                <div class="code-name">#icon-manage_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-manage"></use>
                </svg>
                <div class="name">manage</div>
                <div class="code-name">#icon-manage</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-offline_fill"></use>
                </svg>
                <div class="name">offline_fill</div>
                <div class="code-name">#icon-offline_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-offline"></use>
                </svg>
                <div class="name">offline</div>
                <div class="code-name">#icon-offline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-people"></use>
                </svg>
                <div class="name">people</div>
                <div class="code-name">#icon-people</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-picture_fill"></use>
                </svg>
                <div class="name">picture_fill</div>
                <div class="code-name">#icon-picture_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-picture"></use>
                </svg>
                <div class="name">picture</div>
                <div class="code-name">#icon-picture</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-playon_fill"></use>
                </svg>
                <div class="name">playon_fill</div>
                <div class="code-name">#icon-playon_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-playon"></use>
                </svg>
                <div class="name">playon</div>
                <div class="code-name">#icon-playon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-systemprompt_fill"></use>
                </svg>
                <div class="name">systemprompt_fill</div>
                <div class="code-name">#icon-systemprompt_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-systemprompt"></use>
                </svg>
                <div class="name">systemprompt</div>
                <div class="code-name">#icon-systemprompt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-translation_fill"></use>
                </svg>
                <div class="name">translation_fill</div>
                <div class="code-name">#icon-translation_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-translation"></use>
                </svg>
                <div class="name">translation</div>
                <div class="code-name">#icon-translation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-unlock"></use>
                </svg>
                <div class="name">unlock</div>
                <div class="code-name">#icon-unlock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cloud-download"></use>
                </svg>
                <div class="name">cloud-download</div>
                <div class="code-name">#icon-cloud-download</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-email"></use>
                </svg>
                <div class="name">email</div>
                <div class="code-name">#icon-email</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-email-fill"></use>
                </svg>
                <div class="name">email-fill</div>
                <div class="code-name">#icon-email-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-find-fill"></use>
                </svg>
                <div class="name">find-fill</div>
                <div class="code-name">#icon-find-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-find"></use>
                </svg>
                <div class="name">find</div>
                <div class="code-name">#icon-find</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gift"></use>
                </svg>
                <div class="name">gift</div>
                <div class="code-name">#icon-gift</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gift-fill"></use>
                </svg>
                <div class="name">gift-fill</div>
                <div class="code-name">#icon-gift-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-microphone-mute"></use>
                </svg>
                <div class="name">microphone-mute</div>
                <div class="code-name">#icon-microphone-mute</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-microphone-mute-fill"></use>
                </svg>
                <div class="name">microphone-mute-fill</div>
                <div class="code-name">#icon-microphone-mute-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sex-man"></use>
                </svg>
                <div class="name">sex-man</div>
                <div class="code-name">#icon-sex-man</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sex-woman"></use>
                </svg>
                <div class="name">sex-woman</div>
                <div class="code-name">#icon-sex-woman</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sound-mute"></use>
                </svg>
                <div class="name">sound-mute</div>
                <div class="code-name">#icon-sound-mute</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sound-mute-fill"></use>
                </svg>
                <div class="name">sound-mute-fill</div>
                <div class="code-name">#icon-sound-mute-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-star-collection-fill"></use>
                </svg>
                <div class="name">star-collection-fill</div>
                <div class="code-name">#icon-star-collection-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-star-collection"></use>
                </svg>
                <div class="name">star-collection</div>
                <div class="code-name">#icon-star-collection</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-star-collection-half"></use>
                </svg>
                <div class="name">star-collection-half</div>
                <div class="code-name">#icon-star-collection-half</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-modal-fullscreen"></use>
                </svg>
                <div class="name">modal-fullscreen</div>
                <div class="code-name">#icon-modal-fullscreen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-modal-drag"></use>
                </svg>
                <div class="name">modal-drag</div>
                <div class="code-name">#icon-modal-drag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-modal-fullscreen-exit"></use>
                </svg>
                <div class="name">modal-fullscreen-exit</div>
                <div class="code-name">#icon-modal-fullscreen-exit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file-folder-fill"></use>
                </svg>
                <div class="name">file-folder-fill</div>
                <div class="code-name">#icon-file-folder-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file-folder-add-fill"></use>
                </svg>
                <div class="name">file-folder-add-fill</div>
                <div class="code-name">#icon-file-folder-add-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add-team"></use>
                </svg>
                <div class="name">添加用户组</div>
                <div class="code-name">#icon-add-team</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjianziliao"></use>
                </svg>
                <div class="name">文件资料</div>
                <div class="code-name">#icon-wenjianziliao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qingchu"></use>
                </svg>
                <div class="name">清除</div>
                <div class="code-name">#icon-qingchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Vue3_date"></use>
                </svg>
                <div class="name">Vue3_date</div>
                <div class="code-name">#icon-Vue3_date</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Vue3_share"></use>
                </svg>
                <div class="name">Vue3_share</div>
                <div class="code-name">#icon-Vue3_share</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Vue3_user-add"></use>
                </svg>
                <div class="name">Vue3_user-add</div>
                <div class="code-name">#icon-Vue3_user-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-Vue3_usergroup"></use>
                </svg>
                <div class="name">Vue3_user group</div>
                <div class="code-name">#icon-a-Vue3_usergroup</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Vue3_user"></use>
                </svg>
                <div class="name">Vue3_user</div>
                <div class="code-name">#icon-Vue3_user</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Vue3_notice"></use>
                </svg>
                <div class="name">Vue3_notice</div>
                <div class="code-name">#icon-Vue3_notice</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Vue3_feedback"></use>
                </svg>
                <div class="name">Vue3_feedback</div>
                <div class="code-name">#icon-Vue3_feedback</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-shanchuqingchu"></use>
                </svg>
                <div class="name">删除、清除</div>
                <div class="code-name">#icon-a-shanchuqingchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gerenxinxi"></use>
                </svg>
                <div class="name">个人信息</div>
                <div class="code-name">#icon-gerenxinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Vue3_share-filled"></use>
                </svg>
                <div class="name">Vue3_share-filled</div>
                <div class="code-name">#icon-Vue3_share-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Vue3_feedback-filled"></use>
                </svg>
                <div class="name">Vue3_feedback-filled</div>
                <div class="code-name">#icon-Vue3_feedback-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Vue3_notice-filled"></use>
                </svg>
                <div class="name">Vue3_notice-filled</div>
                <div class="code-name">#icon-Vue3_notice-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Vue3_date-filled1"></use>
                </svg>
                <div class="name">Vue3_date-filled</div>
                <div class="code-name">#icon-Vue3_date-filled1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#icon-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-right"></use>
                </svg>
                <div class="name">right</div>
                <div class="code-name">#icon-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jia"></use>
                </svg>
                <div class="name">加</div>
                <div class="code-name">#icon-jia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jian"></use>
                </svg>
                <div class="name">减</div>
                <div class="code-name">#icon-jian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu-dakai"></use>
                </svg>
                <div class="name">删除-打开</div>
                <div class="code-name">#icon-shanchu-dakai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu_dakai_fill"></use>
                </svg>
                <div class="name">删除_打开_fill</div>
                <div class="code-name">#icon-shanchu_dakai_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Vue3_delete"></use>
                </svg>
                <div class="name">Vue3_delete</div>
                <div class="code-name">#icon-Vue3_delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Vue3_screen"></use>
                </svg>
                <div class="name">Vue3_screen</div>
                <div class="code-name">#icon-Vue3_screen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Vue3_screen-filled"></use>
                </svg>
                <div class="name">Vue3_screen-filled</div>
                <div class="code-name">#icon-Vue3_screen-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Vue3_delete-filled"></use>
                </svg>
                <div class="name">Vue3_delete-filled</div>
                <div class="code-name">#icon-Vue3_delete-filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-more1"></use>
                </svg>
                <div class="name">more</div>
                <div class="code-name">#icon-more1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-more-vertical"></use>
                </svg>
                <div class="name">more-vertical</div>
                <div class="code-name">#icon-more-vertical</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-userGroup2"></use>
                </svg>
                <div class="name">16gf-userGroup2</div>
                <div class="code-name">#icon-userGroup2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou_liebiaoxiangyou"></use>
                </svg>
                <div class="name">箭头_列表向右</div>
                <div class="code-name">#icon-jiantou_liebiaoxiangyou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou_liebiaoshouqi"></use>
                </svg>
                <div class="name">箭头_列表收起</div>
                <div class="code-name">#icon-jiantou_liebiaoshouqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou_liebiaoxiangzuo"></use>
                </svg>
                <div class="name">箭头_列表向左</div>
                <div class="code-name">#icon-jiantou_liebiaoxiangzuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou_liebiaozhankai"></use>
                </svg>
                <div class="name">箭头_列表展开</div>
                <div class="code-name">#icon-jiantou_liebiaozhankai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock_fill1"></use>
                </svg>
                <div class="name">lock_fill</div>
                <div class="code-name">#icon-lock_fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-people_fill"></use>
                </svg>
                <div class="name">people_fill</div>
                <div class="code-name">#icon-people_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-unlock_fill"></use>
                </svg>
                <div class="name">unlock_fill</div>
                <div class="code-name">#icon-unlock_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zuzhijiagou"></use>
                </svg>
                <div class="name">组织架构</div>
                <div class="code-name">#icon-zuzhijiagou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yuyanqiehuan1"></use>
                </svg>
                <div class="name">语言切换</div>
                <div class="code-name">#icon-yuyanqiehuan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiyegongsi"></use>
                </svg>
                <div class="name">企业公司</div>
                <div class="code-name">#icon-qiyegongsi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-earth-full"></use>
                </svg>
                <div class="name">地球,地理,全球</div>
                <div class="code-name">#icon-earth-full</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
